﻿@model Grand.Web.Models.Knowledgebase.KnowledgebaseArticleModel
@inject SeoSettings seoSettings
@{
    Layout = "_ColumnsTwo";
    Html.AddTitleParts(!String.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Name);
    Html.AddMetaDescriptionParts(Model.MetaDescription);
    Html.AddMetaKeywordParts(Model.MetaKeywords);

    var canonicalUrlsEnabled = seoSettings.CanonicalUrlsEnabled;
    if (canonicalUrlsEnabled)
    {
        var articleUrl = Url.RouteUrl("KnowledgebaseArticle", new { SeName = Model.SeName }, this.Url.ActionContext.HttpContext.Request.Scheme);
        Html.AddCanonicalUrlParts(articleUrl);
    }
}

@*breadcrumb*@
@section Breadcrumb
    {
    @if (Model.CategoryBreadcrumb.Any())
    {
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="@Url.RouteUrl("Knowledgebase")" title="@T("Knowledgebase")">@T("Knowledgebase")</a>
            </li>

            @foreach (var cat in Model.CategoryBreadcrumb)
            {
                <li class="breadcrumb-item">
                    <a href="@Url.RouteUrl("KnowledgebaseCategory", new { SeName = cat.SeName })" title="@cat.Name">@cat.Name</a>
                </li>
            }
        </ol>
    }
}

@section left {
    @await Component.InvokeAsync("KnowledgebaseCategories", new Grand.Web.Models.Knowledgebase.KnowledgebaseHomePageModel { CurrentCategoryId = Model.ParentCategoryId })
}

<div class="page">
    <h1 class="h2 generalTitle">
        @Model.Name
    </h1>

    @Html.Raw(@Model.Content)

    @if (Model.RelatedArticles.Any())
    {
        <h4>@T("Knowledgebase.Article.RelatedArticles")</h4>
        <div class="list-group">
            @foreach (var article in Model.RelatedArticles)
            {
                <a class="list-group-item" href="@Url.RouteUrl("KnowledgebaseArticle", new { SeName = article.SeName })">
                    @article.Name
                </a>
            }
        </div>
    }

    @if (Model.AllowComments)
    {
        <div class="fieldset new-comment generalMarginSupporter" id="comments">
            <h4 class="generalTitle generalMarginSupporter">@T("Knowledgebase.Article.Comments.LeaveYourComment")</h4>
            <div class="notifications">
                <div asp-validation-summary="ModelOnly" class="message-error"></div>
                @{
                    var result = TempData["Grand.knowledgebase.addarticlecomment.result"] as string;
                }
                @if (!String.IsNullOrEmpty(result))
                {
                    <div class="result card bg-info p-3 text-white">@result</div>
                }
            </div>
            <form asp-route="KnowledgebaseArticle" asp-route-sename="@Model.SeName" method="post">
                <div class="form-fields">
                    <div class="form-group">
                        <label asp-for="AddNewComment.CommentText" class="col-form-label">@T("Knowledgebase.Article.CommentText"):</label>
                        <textarea asp-for="AddNewComment.CommentText" class="enter-comment-text form-control"></textarea>
                        <span asp-validation-for="AddNewComment.CommentText"></span>
                    </div>
                    @if (Model.AddNewComment.DisplayCaptcha)
                    {
                        <div class="captcha-box">
                            <captcha />
                        </div>
                    }
                </div>
                <div class="buttons text-xs-center text-md-left generalMarginSupporter">
                    <input type="submit" name="add-comment" class="btn btn-info blog-post-add-comment-button" value="@T("Knowledgebase.Article.Comments.SubmitButton")" />
                </div>
            </form>
        </div>
        if (Model.Comments.Any())
        {
            <div class="comment-list">
                <h4 class="generalTitle generalMarginSupporter"><strong>@T("Knowledgebase.Article.Comments")</strong></h4>
                <div class="comments">
                    @foreach (var comment in Model.Comments)
                    {
                        <div class="card comment blog-comment text-center text-sm-left">
                            @if (comment.AllowViewingProfiles)
                            {
                                <h5 class="card-header"><a href="@Url.RouteUrl("CustomerProfile", new {id = comment.CustomerId})" class="username">@(comment.CustomerName)</a></h5>
                            }
                            else
                            {
                                <h5 class="username card-header">@(comment.CustomerName)</h5>
                            }
                            <div class="card-body row">
                                @if (!String.IsNullOrEmpty(comment.CustomerAvatarUrl))
                                {
                                    <div class="col-12 col-xl-2 col-lg-3 col-sm-4 col-md-3 d-flex justify-content-center user-info">
                                        <div class="avatar">
                                            @if (comment.AllowViewingProfiles)
                                            {
                                                <a href="@Url.RouteUrl("CustomerProfile", new {id = comment.CustomerId})" class="avatar-img-link">
                                                    <img src="@(comment.CustomerAvatarUrl)" class="avatar-img" alt="avatar" />
                                                </a>
                                            }
                                            else
                                            {
                                                <img src="@(comment.CustomerAvatarUrl)" class="avatar-img" alt="avatar" />
                                            }
                                        </div>
                                    </div>
                                }
                                <div class="col-12 col-sm-9 comment-content">
                                    <div class="comment-time">
                                        <label>@T("Knowledgebase.Article.Comments.CreatedOn"):</label>
                                        <span class="stat-value">@comment.CreatedOn.ToString("g")</span>
                                    </div>
                                    <div class="comment-body text-center text-sm-left">
                                        @Html.Raw(Grand.Core.Html.HtmlHelper.FormatText(comment.CommentText, false, true, false, false, false, false))
                                    </div>
                                </div>
                            </div>
                        </div>
                    }
                </div>
            </div>
        }
    }
</div>

<script asp-location="Footer">
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>